<template>
    <view class="page-container nav-custom">
        <nav-bar background="#fff" title="修改登录密码"> </nav-bar>
        <form class="form" @submit="onSubmit">
            <view class="cell-form flex-cb f-mb1">
                <view class="cell-form-label">新密码<text class="required f-mr1">*</text></view>
                <view class="cell-form-input">
                    <input v-model.trim="formData.password" class="login-input" type="password" name="password" placeholder="请输入密码" />
                </view>
            </view>
            <view class="cell-form flex-cb f-mb1">
                <view class="cell-form-label">确认密码<text class="required f-mr1">*</text></view>
                <view class="cell-form-input">
                    <input v-model.trim="formData.password_confirmation" class="login-input" type="password" name="password_confirmation" placeholder="请再次输入密码" />
                </view>
            </view>
            <view class="form-footer">
                <button class="btn-primary block" form-type="submit" :loading="loading">{{ loading ? "提交中" : "提交" }}</button>
            </view>
        </form>
    </view>
</template>

<script>
import WxValidate from "@/utils/WxValidate"
export default {
    data() {
        return {
            loading: false,
            codeLoading: false,
            disabled: false,
            formData: {
                payment_password: "",
                payment_password_confirmation: ""
            }
        }
    },
    async onLoad() {
        const msg = {
            password: { required: "请输入密码", minlength: "密码长度最小为6位" },
            password_confirmation: { required: "请再次输入密码", minlength: "密码长度最小为6位" }
        }
        const rule = {
            password: { required: true, minlength: 6 },
            password_confirmation: { required: true, minlength: 6 }
        }
        const rules = {
            password: rule.password,
            password_confirmation: rule.password_confirmation
        }
        const message = {
            password: msg.password,
            password_confirmation: msg.password_confirmation
        }
        this.validate = new WxValidate(rules, message)
    },
    methods: {
        async onSubmit(e) {
            const params = e.mp.detail.value
            // 传入表单数据，调用验证方法
            if (!this.validate.checkForm(params)) {
                const error = this.validate.errorList[0]
                this.$showToast(error.msg)
                return false
            }
            let { password, password_confirmation } = this.formData
            if (password !== password_confirmation) {
                return this.$showToast("两次密码不一样")
            }
            try {
                if (this.loading) return
                this.loading = true
                await this.$api.updatePwd(this.formData)
                this.$showSuccess("修改成功")
                await this.$setTime(1500)
                this.loading = false
                uni.navigateBack({
                    delta: 1
                })
            } catch (error) {
                this.loading = false
            }
        }
    }
}
</script>
